<template>
    <page-view>
        <div class="flex flex-col overflow-auto">
            <div class="flex flex-row items-baseline my-5 text-gray-500">
                <span class="text-[22px]">我的订单</span>
                <span class="text-[12px] ml-2">请谨防钓鱼链接或诈骗电话</span>
            </div>
            <ul class="order-type-list">
                <li @click="queryFormData.order_status = ''" :class="{active:queryFormData.order_status===''}">全部</li>
                <li @click="queryFormData.order_status = '0'" :class="{ active: queryFormData.order_status === '0' }">
                    未付款
                </li>
                <li @click="queryFormData.order_status = '1'" :class="{ active: queryFormData.order_status === '1' }">
                    已付款
                </li>
                <li @click="queryFormData.order_status = '2'" :class="{ active: queryFormData.order_status === '2' }">
                    已发货
                </li>
                <li @click="queryFormData.order_status = '3'" :class="{ active: queryFormData.order_status === '3' }">
                    已签收
                </li>
            </ul>
            <div class="order-info-list">
                <div class="order-info-item border border-solid border-gray-200 mt-2"
                    v-for="(item, index) in myOrderInfoList.listData">
                    <div class="border-b border-solid border-gray-200 px-6">
                        <h3 class="text-[18px] text-gray-500 my-5">
                            {{ orderStatus[item.order_status] }}
                            <span v-if="item.order_status === 0"
                                class="text-gray-500 text-[12px] cursor-pointer text-red-500 hover:underline"
                                @click="toAliPay(item.id)">去付款</span>
                        </h3>
                        <div class="flex flex-row text-gray-500 text-[14px] justify-between">
                            <p>{{ formatDateTime(item.order_submission_time, "YYYY年MM月DD日 HH:mm:ss") }} |
                                {{ item.addressInfo.address_name }} | 订单号：{{ item.id }} |
                                在线支付【{{ orderPayType[item.order_pay_type] }}】</p>
                            <div>{{ item.order_status === 0 ? '订单' : '实付' }}金额：<span class="text-black text-[22px]">{{
                                    item.totalMoney.toFixed(2)
                            }}</span>元
                            </div>
                        </div>
                    </div>
                    <div class="flex flex-row items-center p-6">
                        <img :src="baseURL + item.orderDetailInfoList[0].goodsInfo.goods_photo[0]"
                            class="w-[120px] h-[120px] object-contain" alt="">
                        <div class="flex-1 text-gray-500 text-[14px]">
                            <p>{{ item.orderDetailInfoList[0].goodsInfo.goods_name }}</p>
                            <p>{{ item.orderDetailInfoList[0].goodsInfo.goods_sale_price }}元 x {{
                                    item.orderDetailInfoList[0].goods_num
                            }}</p>
                        </div>
                        <ul class="right-button-list">
                            <li @click="showDrawer(item.id)">订单详细</li>
                            <li>申请售后</li>
                            <li>联系客户</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="mt-2 flex flex-row justify-between" v-if="myOrderInfoList.listData.length > 0">
                <p class="text-gray-500 text-[14px]">当前共第{{ queryFormData.pageIndex }}页，共{{ myOrderInfoList.pageCount
                }}页，共{{ myOrderInfoList.totalCount }}条</p>
                <el-pagination background layout="prev, pager, next" :current-page="queryFormData.pageIndex"
                    @current-change="pageChange" :page-size="5" :total="myOrderInfoList.totalCount"></el-pagination>
            </div>
            <el-drawer v-model="isShowDrawer" :size="700" :destroy-on-close="true" :with-header="false">
                <order-info-drawer :order-id="currentEditRowId" />
            </el-drawer>
        </div>
    </page-view>
</template>


<script setup>
import API from '../../utils/API';
import { reactive, ref, inject, watch } from "vue";
import { ElMessageBox } from "element-plus";
import { formatDateTime } from "../../utils/DateTimeUtils"
import { useRouter } from "vue-router";
const baseURL = inject("baseURL");
const router = useRouter();
const queryFormData = reactive({
    pageIndex: 1,
    pageSize: 5,
    order_status: "",
})
const myOrderInfoList = reactive({
    listData: [],
    pageStart: 1,
    pageEnd: 1,
    totalCount: 0,
    pageCount: 0,
});

const orderStatus = reactive({
    0: "未付款",
    1: "已付款",
    2: "已发货",
    3: "已签收"
})
const orderPayType = reactive({
    1: "支付宝",
    2: "微信",
    3: "银行卡",
    4: "货到付款"
})

const isLoading = ref(false);
const queryData = () => {
    isLoading.value = true;
    API.orderInfo.getListByPage(queryFormData)
        .then(result => {
            result.listData.forEach(item => {
                item.totalMoney = 0;
                item.orderDetailInfoList.forEach(item2 => {
                    item2.goodsInfo.goods_photo = JSON.parse(item2.goodsInfo.goods_photo);
                    item.totalMoney += item2.goodsInfo.goods_sale_price * item2.goods_num;
                })

            })
            myOrderInfoList.listData = result.listData;
            myOrderInfoList.pageStart = result.pageStart;
            myOrderInfoList.pageEnd = result.pageEnd;
            myOrderInfoList.totalCount = result.totalCount;
            myOrderInfoList.pageCount = result.pageCount;
            console.log(myOrderInfoList.listData)
        })
        .finally(() => {
            isLoading.value = false;
        })
}

queryData();

const pageChange = page => {
    queryFormData.pageIndex = page;
    queryData();
}

/**
 * 去付款
 */
const toAliPay = (id) => {
    if (id) {
        API.orderInfo.aliPay(id)
            .then(result => {
                location.href = result.data;
            })
            .finally(() => {
                isLoading.value = false;
            });
    } else {
        ElMessageBox.alert("订单号不存在，请重新下单", "提示", {
            type: "error"
        })
            .then(() => {
                router.replace({ name: "index" });
            })
    }
}
watch(() => queryFormData.order_status, (newValue, oldValue) => {
    queryFormData.pageIndex = 1;
    queryData();
});


/**
 * 抽屉，展示订单详细信息
 */
const isShowDrawer = ref(false);
const currentEditRowId = ref(null);
const showDrawer = id => {
    isShowDrawer.value = true;
    currentEditRowId.value = id;
}
</script>

<style lang="scss" scoped>
.order-type-list {
    @apply flex flex-row;

    >li {
        @apply p-[5px] text-gray-500 border-red-500 border-solid cursor-pointer mr-4;

        &.active {
            @apply border-b-2;
        }
    }
}

.right-button-list {
    height: 120px;

    >li {
        transition: all 0.3s linear;
        @apply cursor-pointer h-[30px] w-[100px] border border-solid border-gray-200 text-gray-500 text-[14px] flex flex-row justify-center items-center mt-[10px];

        &:hover {
            color: red;
            border-color: currentColor;
        }
    }
}
</style>